<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<view class="page-tips">页面中引入组件</view><ui-br />
		<ui-code :code="code.code0"></ui-code><ui-br />
		<view class="page-tips">通过<span class="span-code">refs</span>方法调用</view><ui-br />
		<ui-code :code="code.code1"></ui-code><ui-br />
		
		<!-- <ct-datetime-picker ref="datetime" mode="datetime" data="2023-1-30 22:55"></ct-datetime-picker> -->
		<view class="page-title">示例</view><ui-br />
		<view>时间：{{time}}</view><ui-br />
		<ct-button @click="open">打开时间</ct-button><ui-br />
		
		<view class="page-title">props说明</view><ui-br />
		<ui-table :data="propsList" /><ui-br />
		<view class="page-title">refs调用说明</view><ui-br />
		<ui-table :data="refsList" /><ui-br />
		<ct-datetime-picker ref="datetime" ></ct-datetime-picker>
	</view>
</template>

<script>
	import code from './code.js';
	export default {
		data() {
			return {
				time:"2024-01-31",
				code: "",
				propsList:[{
					parameter: 'mode',
					values: 'date/time/datetime'
				},{
					parameter: 'data',
					values: '需要回显的时间'
				},{
					parameter: 'title',
					values: '显示的标题'
				}],
				refsList:[{
					parameter: 'confirm',
					values: '确定按钮,获取选中的时间'
				},{
					parameter: 'cancel',
					values: '取消按钮，返回false'
				}]
			}
		},
		created() {
			this.code = code
			let date = new Date()
			let year = date.getFullYear()
			let month = (date.getMonth() + 1).toString().length==1?`0${(date.getMonth() + 1)}`:(date.getMonth() + 1)
			let day = (date.getDate()).toString().length==1?`0${(date.getDate())}`:(date.getDate())
			this.time = `${year}-${month}-${day}`
		},
		methods: {
			open(){
				this.$refs['datetime'].open({
					confirm:(e)=>{
						console.log(e)
						this.time = e
					},
					cancel:(e)=>{
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>